/**
 * 动态列表 useDynamicList
 * @author SPY
 * @date 2020/04/14
 */
import React, { useState } from 'react';
import { Form, Row, Col, Card, DatePicker, Input, Button, Space } from 'antd';
import { useDynamicList, useUpdateEffect } from '@umijs/hooks';
import moment from 'moment';

const { Item } = Form;

interface personalInfoParams {
  name?: string;
  phone?: string;
}

const dataY = [{ name: '马云', phone: '15838210079' }];
const dataT = [{ name: '马化腾', phone: '15936971344' }];

const useDynamicListPage = () => {
  const [values, setValues] = useState<object>({});
  const [personalInfo, setPersonalInfo] = useState<Array<personalInfoParams>>([
    {},
  ]);
  const [status, setStatus] = useState<boolean>(true);

  const [form] = Form.useForm();

  const { list, push, pop, resetList }: any = useDynamicList(personalInfo);

  // 忽略首次渲染
  useUpdateEffect(() => {
    resetList(personalInfo);
  }, [personalInfo]);

  // 编辑模式
  const editMode = () => {
    setPersonalInfo(() => {
      form.setFieldsValue({
        personalInfo: status ? dataY : dataT,
      });
      return status ? dataY : dataT;
    });
  };

  // 切换状态
  const changeStatus = () => {
    setStatus(!status);
    editMode();
  };

  // 显示两栏
  const showTwo = () => {
    const newData = [...dataT, ...dataY];
    form.setFieldsValue({ personalInfo: newData });
    setPersonalInfo(newData);
  };

  const onValuesChange = (changeValues: any, allValues: any) => {
    setValues(allValues);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      name="basicForm"
      // initialValues={{ personalRegisterTime: moment(), personalInfo: list }}
      initialValues={{ personalRegisterTime: moment() }}
      onValuesChange={onValuesChange}
    >
      <Row gutter={24} justify="space-between">
        <Col span={12}>
          <Card size="small">
            <Item label="人员登记日期" name="personalRegisterTime">
              <DatePicker style={{ width: '100%' }} />
            </Item>
            {list.map((item: object, index: number) => (
              <div
                key={index}
                style={{ display: 'flex', justifyContent: 'space-between' }}
              >
                <Item
                  label="来访姓名"
                  name={['personalInfo', index, 'name']}
                  style={{ flex: 1, marginRight: 10 }}
                >
                  <Input placeholder="请输入来访姓名" />
                </Item>
                <Item
                  label="手机号码"
                  name={['personalInfo', index, 'phone']}
                  style={{ flex: 1 }}
                >
                  <Input placeholder="请输入手机号码" />
                </Item>
              </div>
            ))}
            <Button
              type="dashed"
              block
              onClick={push}
              style={{ color: '#40a9ff', marginBottom: 6 }}
            >
              添加一行
            </Button>
            <Button
              type="dashed"
              block
              onClick={pop}
              style={{ color: '#f759ab' }}
            >
              移除一行
            </Button>
            <Space style={{ marginTop: 10 }}>
              <Button
                type="primary"
                onClick={editMode}
                disabled={list.length === 2}
              >
                编辑模式
              </Button>
              <Button
                type="primary"
                onClick={changeStatus}
                disabled={list.length === 2}
              >
                切换信息
              </Button>
              <Button type="primary" onClick={showTwo}>
                显示两栏
              </Button>
            </Space>
          </Card>
        </Col>
        <Col span={12}>
          <pre>{JSON.stringify(values, null, 2)}</pre>
        </Col>
      </Row>
    </Form>
  );
};

useDynamicListPage.title = 'useDynamicListPage 使用';

export default useDynamicListPage;
